<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<style type="text/css">
			html,body{height:100%;}
			body{display: none;}
			*{margin:0;padding:0;font-family: "微软雅黑";}
			.sw{height:100%;}
			.sd1{background:#f8f3f7 url(img/start4.jpg) no-repeat center bottom;background-size: 100% auto;}
			.sd1 img:nth-child(1){display:block;width:260px;height:260px;margin:150px auto 60px;}
			.sd1 img:nth-child(2){display:block;width:260px;height:40px;margin:0 auto;}
			.sd2{background:#f8f3f7 url(img/start3.jpg) no-repeat center top;background-size: 100% auto;}
			.p1{margin:550px 0 0 150px;font-size: 50px;}
			.p2{margin:50px 0 0 50px;font-size: 50px;}
			.p2 i{color:#f0f;font-style: normal;}
			.sd3{position:relative;background:url(img/start6.jpg);background-size: 100% 100%;}
			.sd3 img,.sd5 img{position: absolute;top:60px;left:50%;margin-left:-19px;width:38px;-webkit-animation: move 1s linear infinite;}
			.sd4{background:url(img/start7.jpg);background-size:100% 100%;}
			.sd5{background:url(img/start8.jpg);background-size: 100% 100%;}
			@-webkit-keyframes move{
				from{top:20px}
				to{top:60px}
			}
		</style>
	</head>
	<body>
		<div class="swiper-container sw">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide sd1">
		        	<img src="img/start1.jpg" class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s"/>
		        	<img src="img/start2.jpg" class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        </div>
		        <div class="swiper-slide sd2">
		        	<p class="p1 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s">多联系，不孤单</p>
		        	<p class="p2 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"><i>走秀</i>与你相伴</p>
		        </div>
		        <div class="swiper-slide sd3">
		        	<img src="img/start5.jpg" /> 
		        </div>
		        <div class="swiper-slide sd4"></div>
		        <div class="swiper-slide sd5">
		       		 <img src="img/start5.jpg" /> 
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
   			 <div class="swiper-pagination"></div>
	   </div>
	</body>
	<script src="js/jquery183.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script> 
		$(function(){
			bodyScale(640);	
			$('body').css("display","block");
		 	var mySwiper = new Swiper ('.sw', {	  
		 		onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				}, 
				onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}, 
		   		 // 如果需要分页器
		   		 pagination: '.swiper-pagination'	    
		    
		 	})
		 	 
			function bodyScale(n){	//屏幕宽度自适应
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/n;
				document.body.style.zoom=scale;
			}
			window.onresize=function(){			
					bodyScale(640);		
			}
		})
		
		
    </script>
</html>
